<template>
  <div>
      <el-dialog :visible.sync="editData.dialogEdit" :before-close="handleClose" size="tiny" title="分类管理" v-loading="loadingDialog">
        <el-form :model="formInline" ref="formInline" :rules="rulesAddTeaPop" label-width="96px" class="dynamicTagForm">
          <el-row :gutter="41">
            <el-col :span="23">
              <!-- <span class="title-text">现有分类<span class="warn"> ( 删除该类别后，该类别下的文章转移到 “无类别” 中 )</span></span> -->
              <span class="title-text">现有分类<span class="warn"> ( 类别删除后，文章失去类别归属，还请及时更新相关链接。)</span></span>
                <el-form-item label="">
                    <div >
                        <el-tag  v-for="(tag,index) in dynamicTags" :key="index" 
                        :closable="tag.isCloseTag" 
                        :disable-transitions="false"  
                        type=""
                        @close="handleCloseTag(tag)">{{tag.tagName}} {{ tag.TagNum  }}
                        </el-tag>
                    </div>
                </el-form-item>
            </el-col>
          </el-row>
           <el-row :gutter="41" style="margin-top:30px;">
               <el-col :span="23">
                   <span class="title-text">输入新分类</span>
                    <el-form-item prop="inputValue" class="new-tag">
                         <el-popover placement="top-start" trigger="focus" content="字符长度不大于10个">
                                <!-- <el-input v-model="formInline.sCardNumber" placeholder="请输入卡片卡号" :maxlength="10" slot="reference"></el-input> -->
                                <el-input
                                    placeholder="请输入类别名称"
                                    class="input-new-tag"
                                    v-model="formInline.inputValue"
                                    :maxlength="10" 
                                    slot="reference"
                                >
                                </el-input>
                        </el-popover>     
                        <!-- <el-input
                            placeholder="请输入类别名称"
                            class="input-new-tag"
                            v-model="formInline.inputValue"
                        >
                        </el-input> -->
                        <span  @click="newAddSureBtn('formInline')" class="add-sure" v-loading="addSureLoading">确认</span>
                    </el-form-item>
               </el-col>
           </el-row>
        </el-form>
        
        <div slot="footer" class="dialog-footer">
          <p class="btn">
            <el-button @click="cancel('addTeaPop')">取 消</el-button>
            <el-button type="primary" :loading="loadingBtn" @click="save">保 存</el-button>
          </p>
        </div>
      </el-dialog>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { editType, addNewType} from 'api/eschool';
export default {
    props: {
        editData: {
            default() {
                return {
                    dialogEdit: true // 默认不显示
                }
            },
            required: true
        }
    },
    data() {
        var validate = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入类别名称'));
            } else {
                callback();
            }
        };
        return {
      // 添加学校弹框
            showNewTag: false,
            loadingBtn: false,
            formInline: {
                inputVisible: false,
                inputValue: ''
            },
            addSureLoading: false, // 确认按钮
            loadingDialog: true,
            dynamicTags: [],
            newAddTypeArr: [], // 新增的分类数组
            deleteTypeArr: [], // 删除的分类的数组
            rulesAddTeaPop: {
                inputValue: [
                      { pattern: /^[^\s]+$/, message: '请勿输入空格', trigger: 'blur' },
                      { max: 10, message: '长度为1~10个字符', trigger: 'blur' },
                      { validator: validate, trigger: 'blur' }
                ]
            }
        }
    },
    computed: {
        ...mapGetters([
            'schoolId',
            'schoolName'
        ])
    },
    created() {
        this.editType();// 获取已有的编辑分类
    },
    methods: {
        // 获取已有的编辑分类
        editType() {
            editType(this.schoolId).then(res => {
                this.loadingDialog=false;
                this.dynamicTags=[];
                res.data.content.forEach((val, index) => {
                    let isCloseTag='';
                    isCloseTag=val.type=='无类别'?false:true;
                    this.dynamicTags.push({tagId: val.id, TagNum: '('+val.count+')', tagName: val.type, isCloseTag})
                })
            }).catch(() => {
                this.loadingDialog=false;
            })
        },
        // 删除某个分类   // 删除和新增一个分类,要触发父组件重新刷新一下 分类的下拉
        handleCloseTag(tag) {
            if (tag.tagId) {
                this.deleteTypeArr.push(tag.tagId);// 删除的数组
            }
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        },
        // 点击确定 验证10字以内 不含空格
        newAddSureBtn() {
            this.$refs.formInline.validate((valid) => {
                if (valid) {// 验证通过 新增类型
                    // 添加重复项
                    if (this.dynamicTags.some(item => item.tagName==this.formInline.inputValue)) {
                        this.$message.info('不可以重复添加分类！');
                        return;
                    }
                    if (this.dynamicTags.length>=50) {
                        this.$message.info('最多添加50个分类！');
                        return ;
                    }
                    this.dynamicTags.push({tagId: '', TagNum: '(0)', tagName: this.formInline.inputValue, isCloseTag: true})
                    this.newAddTypeArr.push(this.formInline.inputValue);// 新增的分类
                    this.formInline.inputValue='';
                } else {
                    return false;
                }
            });
        },
        
    // 关闭按钮
        handleClose() {
            this.$refs.formInline.resetFields();
            this.editType();// 获取已有的编辑分类
            this.clearDate();
        },
    // 取消按钮 还原弹窗信息
        cancel(dataForm) {
            this.editType();// 获取已有的编辑分类
            this.clearDate();
        },
        // 保存按钮
        save() {
            this.loadingBtn=true;
            let typeNameList=this.newAddTypeArr,
                typeIdList=this.deleteTypeArr;
            addNewType(this.schoolId, typeNameList, typeIdList).then(res => {
                this.editType();// 获取已有的编辑分类
                this.loadingBtn=false;
                this.showNewTag=false;
                this.formInline.inputValue='';
                this.$message.success('保存成功');
                this.$emit('searchAll')// 刷新父组件的下拉的分类
                this.clearDate();
            }).catch(() => {
                this.loadingBtn=false;
            })
        },
        clearDate() {
            this.newAddTypeArr=[];
            this.deleteTypeArr=[];
            this.editData.dialogEdit = false;
            this.formInline.inputValue='';
            this.showNewTag=false;
            this.$refs.formInline.resetFields();
           
        }
    }
}
</script>
<style lang="scss" scoped>
.new-tag{
     margin-top:20px;
}
.input-new-tag{
    width: 170px;
}
.addBtn{
    display: inline-block;
    color: #ff5e2c;
    cursor: pointer;
    margin-top:30px;
}
.add-sure{
    padding-left:10px;
    cursor: pointer;
    color: #ff5e2c;
}
.warn{
    font-size:14px;
    color: #ccc;
    height: 30px;
    line-height: 30px;
    text-align: center;
}
.title-text{
    color:#999;
}

</style>


